<!DOCTYPE html>
<html lang="en">

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>所有产品-小米商城</title>
    <link rel="stylesheet" href="list/list.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .product{
            height:auto;
        }
    </style>
</head>

<body>
    <!-- 黑色导航栏 -->
    <div class="black-nav">
        <div class="wrap">

            <ul class="black-nav-right" id="topbox">

            </ul>

        </div>
    </div>

    <!-- 白色导航栏 -->
    <div class="white-nav">
        <div class="wrap">
            <div class="logo">
                <img src="list/img/denglu-milogo.jpg" alt="">
            </div>
            <div class="nav-bar">
                <ul>
                    <li>
                        <a href="#">Xiaomi手机</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/Fold.webp" alt="">
                                                <p class="name">Xiaomi MIX Fold 4</p>
                                                <p class="price">8999元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/MIX Flip.webp" alt="">
                                                <p class="name">Xiaomi MIX Flip</p>
                                                <p class="price">5999元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/civi4pro.png" alt="">
                                                <p class="name">Xiaomi Civi 4 Pro</p>
                                                <p class="price">2799元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/14ultra.webp" alt="">
                                                <p class="name">Xiaomi 14 Ultra</p>
                                                <p class="price">5999元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/114pro.webp" alt="">
                                                <p class="name">Xiaomi 14 Pro</p>
                                                <p class="price">4599元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/14.webp" alt="">
                                                <p class="name">Xiaomi 14</p>
                                                <p class="price">3999元起</p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">Redmi手机</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/redmi.webp" alt="">
                                                <p class="name">Redmi Note 14 Pro</p>
                                                <p class="price">1899元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/redmi.webp" alt="">
                                                <p class="name">Redmi Note 14 Pro</p>
                                                <p class="price">1899元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/redmi.webp" alt="">
                                                <p class="name">Redmi Note 14 Pro</p>
                                                <p class="price">1899元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/redmi.webp" alt="">
                                                <p class="name">Redmi Note 14 Pro</p>
                                                <p class="price">1899元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/redmi.webp" alt="">
                                                <p class="name">Redmi Note 14 Pro</p>
                                                <p class="price">1899元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/redmi.webp" alt="">
                                                <p class="name">Redmi Note 14 Pro</p>
                                                <p class="price">1899元起</p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">电视</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/mitv.webp" alt="">
                                                <p class="name">小米电视 S Pro 75</p>
                                                <p class="price">6499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/mitv.webp" alt="">
                                                <p class="name">小米电视 S Pro 75</p>
                                                <p class="price">6499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/mitv.webp" alt="">
                                                <p class="name">小米电视 S Pro 75</p>
                                                <p class="price">6499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/mitv.webp" alt="">
                                                <p class="name">小米电视 S Pro 75</p>
                                                <p class="price">6499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/mitv.webp" alt="">
                                                <p class="name">小米电视 S Pro 75</p>
                                                <p class="price">6499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/mitv.webp" alt="">
                                                <p class="name">小米电视 S Pro 75</p>
                                                <p class="price">6499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">笔记本</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/laptop.webp" alt="">
                                                <p class="name">Redmi Book Pro 16</p>
                                                <p class="price">6499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/laptop.webp" alt="">
                                                <p class="name">Redmi Book Pro 16</p>
                                                <p class="price">6499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/laptop.webp" alt="">
                                                <p class="name">Redmi Book Pro 16</p>
                                                <p class="price">6499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/laptop.webp" alt="">
                                                <p class="name">Redmi Book Pro 16</p>
                                                <p class="price">6499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/laptop.webp" alt="">
                                                <p class="name">Redmi Book Pro 16</p>
                                                <p class="price">6499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/laptop.webp" alt="">
                                                <p class="name">Redmi Book Pro 16</p>
                                                <p class="price">6499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">平板</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/pad6.webp" alt="">
                                                <p class="name">Xiaomi Pad 6 Pro</p>
                                                <p class="price">2499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/pad6.webp" alt="">
                                                <p class="name">Xiaomi Pad 6 Pro</p>
                                                <p class="price">2499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/pad6.webp" alt="">
                                                <p class="name">Xiaomi Pad 6 Pro</p>
                                                <p class="price">2499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/pad6.webp" alt="">
                                                <p class="name">Xiaomi Pad 6 Pro</p>
                                                <p class="price">2499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/pad6.webp" alt="">
                                                <p class="name">Xiaomi Pad 6 Pro</p>
                                                <p class="price">2499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/pad6.webp" alt="">
                                                <p class="name">Xiaomi Pad 6 Pro</p>
                                                <p class="price">2499元起</p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">家电</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/wash.webp" alt="">
                                                <p class="name">米家洗烘一体机</p>
                                                <p class="price">1899元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/wash.webp" alt="">
                                                <p class="name">米家洗烘一体机</p>
                                                <p class="price">1899元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/wash.webp" alt="">
                                                <p class="name">米家洗烘一体机</p>
                                                <p class="price">1899元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/wash.webp" alt="">
                                                <p class="name">米家洗烘一体机</p>
                                                <p class="price">1899元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/wash.webp" alt="">
                                                <p class="name">米家洗烘一体机</p>
                                                <p class="price">1899元起</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/wash.webp" alt="">
                                                <p class="name">米家洗烘一体机</p>
                                                <p class="price">1899元起</p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">路由器</a>
                        <div class="nav-bar-list">
                            <div class="wrap">
                                <ul>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/luyou.webp" alt="">
                                                <p class="name">Xiaomi 路由器 AX3000T</p>
                                                <p class="price">159元</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/luyou.webp" alt="">
                                                <p class="name">Xiaomi 路由器 AX3000T</p>
                                                <p class="price">159元</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/luyou.webp" alt="">
                                                <p class="name">Xiaomi 路由器 AX3000T</p>
                                                <p class="price">159元</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/luyou.webp" alt="">
                                                <p class="name">Xiaomi 路由器 AX3000T</p>
                                                <p class="price">159元</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/luyou.webp" alt="">
                                                <p class="name">Xiaomi 路由器 AX3000T</p>
                                                <p class="price">159元</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <div class="img-box">
                                                <img src="list/img/luyou.webp" alt="">
                                                <p class="name">Xiaomi 路由器 AX3000T</p>
                                                <p class="price">159元</p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><a href="#">服务中心</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <div class="search">
                <input type="text" name="searchtext" placeholder="吹风机"></input>
                <button class="iconfont" type="button" name="searchbtn">搜索</button>
            </div>
        </div>
    </div>

    <!-- 内容 -->
    <div class="content">
        <div class="wrap">
            <div class="top-nav">
                <a href="#">首页</a>
                <span class="sep">/</span>
                <span>全部结果</span>
            </div>
        </div>
        <div class="filter">
            <div class="wrap">
                <ul>
                    <li>分类：</li>
                    <li class="all">全部</li>
                    <li>小米手机</li>
                    <li>红米手机</li>
                </ul>
            </div>
        </div>
        <div class="list-box">
            <div class="wrap">
                <ul class="left">
                    <li class="all">综合<span>|</span></li>
                    <li>新品<span>|</span></li>
                    <li>销量<span>|</span></li>
                    <li>价格</li>
                </ul>
                <ul class="right">
                    <li>收货地  <input type="text" placeholder="北京 北京市" class="address"></li>
                    <li><input type="checkbox">  促销</li>
                    <li><input type="checkbox">  分期</li>
                    <li><input type="checkbox">  仅看有货</li>
                </ul>
            </div>
        </div>
        <div class="wrap">
            <div class="product">
                
            </div>
            <div id="pagebox">

            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
        <div class="wrap">
            <div class="footer-service">
                <ul>
                    <ul>
                        <li>
                            <a href="#">
                                <span class="iconfont icon-iconfont7tian"></span>
                                <span>预约维修服务</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="iconfont icon-iconfont15tianwuliyoutuihuo1"></span>
                                <span>7天无理由退货</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="iconfont icon-iconfontbaoyou1"></span>
                                <span>15天免费换货</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="iconfont icon-iconfonticonposition1"></span>
                                <span>满69包邮</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="iconfont icon-iconfontkuaixiufuwu1"></span>
                                <span>1100余家售后网点</span>
                            </a>
                        </li>
                    </ul>
                </ul>
            </div>
            <div class="footer-link">
                <ul>
                    <li></li>
                </ul>
                <ul>
                    <li>选购指南</li>
                    <li>
                        <a href="#">手机</a>
                    </li>
                    <li>
                        <a href="#">电视</a>
                    </li>
                    <li>
                        <a href="#">笔记本</a>
                    </li>
                    <li>
                        <a href="#">平板</a>
                    </li>
                    <li>
                        <a href="#">穿戴</a>
                    </li>
                    <li>
                        <a href="#">耳机</a>
                    </li>
                    <li>
                        <a href="#">家电</a>
                    </li>
                    <li>
                        <a href="#">路由器</a>
                    </li>
                    <li>
                        <a href="#">音箱</a>
                    </li>
                    <li>
                        <a href="#">配件</a>
                    </li>
                </ul>
                <ul>
                    <li>服务中心</li>
                    <li>
                        <a href="#">申请售后</a>
                    </li>
                    <li>
                        <a href="#">售后政策</a>
                    </li>
                    <li>
                        <a href="#">维修服务价格</a>
                    </li>
                    <li>
                        <a href="#">订单查询</a>
                    </li>
                    <li>
                        <a href="#">以旧换新</a>
                    </li>
                    <li>
                        <a href="#">保障服务</a>
                    </li>
                    <li>
                        <a href="#">防伪查询</a>
                    </li>
                    <li>
                        <a href="#">F码通道</a>
                    </li>
                </ul>
                <ul>
                    <li>线下门店</li>
                    <li>
                        <a href="#">小米之家</a>
                    </li>
                    <li>
                        <a href="#">服务网点</a>
                    </li>
                    <li>
                        <a href="#">授权体验店/专区</a>
                    </li>
                </ul>
                <ul>
                    <li>关于小米</li>
                    <li>
                        <a href="#">了解小米</a>
                    </li>
                    <li>
                        <a href="#">加入小米</a>
                    </li>
                    <li>
                        <a href="#">投资者关系</a>
                    </li>
                    <li>
                        <a href="#">可持续发展</a>
                    </li>
                    <li>
                        <a href="#">廉洁举报</a>
                    </li>
                </ul>
                <ul>
                    <li>关注我们</li>
                    <li>
                        <a href="#">新浪微博</a>
                    </li>
                    <li>
                        <a href="#">官方微信</a>
                    </li>
                    <li>
                        <a href="#">联系我们</a>
                    </li>
                    <li>
                        <a href="#">公益基金会</a>
                    </li>
                </ul>

                <div class="footer-aside">
                    <p class="tel">400-100-5678</p>
                    <p class="time">8:00-18:00（仅收市话费）</p>
                    <a href="#" class="kefu">人工客服</a>
                    <p class="tel">400-100-8888</p>
                    <p class="time">8:00-18:00（仅收市话费）</p>
                    <a href="#" class="kefu">人工客服</a>
                </div>
            </div>



            <!-- 底部 -->
            <div class="bottom">
                <div class="wrap">
                    <div class="bottom-logo">
                        <img src="list/img/denglu-milogo.jpg" alt="">
                    </div>
                    <div class="bottom-text">
                        <ul class="bottom-text-top">
                            <li><a href="#">小米商城</a><span>|</span></li>
                            <li><a href="#">小米澎湃OS</a><span>|</span></li>
                            <li><a href="#">米家</a><span>|</span></li>
                            <li><a href="#">多看</a><span>|</span></li>
                            <li><a href="#">游戏</a><span>|</span></li>
                            <li><a href="#">音乐</a><span>|</span></li>
                            <li><a href="#">政企服务</a><span>|</span></li>
                            <li><a href="#">小米天猫店</a><span>|</span></li>
                            <li><a href="#">小米集团隐私政策</a><span>|</span></li>
                            <li><a href="#">小米公司儿童信息保护规则</a><span>|</span></li>
                            <li><a href="#">小米商城隐私政策</a><span>|</span></li>
                            <li><a href="#">小米商城用户协议</a><span>|</span></li>
                            <li><a href="#">问题反馈</a><span>|</span></li>
                            <li><a href="#">Select Location</a><span></span></li>
                        </ul>
                        <ul class="bottom-text-top">
                            <li><a href="#">北京互联网法院法律服务工作站</a><span>|</span></li>
                            <li><a href="#">中国消费者协会</a><span>|</span></li>
                            <li><a href="#">北京市消费者协会</a><span></span></li>
                        </ul>
                        <ul class="bottom-text-middle">
                            <li>© mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2023]0169-004号</li>
                            <li>（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告</li>
                            <li>增值电信业务经营许可证编号：京B2-20180851 网络食品经营备案 京食药网食备202010048 食品经营许可证 新出发京批字第直220280号</li>
                            <li>违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</li>
                        </ul>

                    </div>
                </div>
            </div>
        </div>
    </div>
<!--    <script src="list/list.js"></script>-->
<script type="text/html" id="productitem">
    <div className="item">
        <a href="#">
            <img src="" alt=""/>
            <p className="item-name"></p>
            <p className="item-price"></p>
        </a>
    </div>
</script>
    <script src="layui/layui.all.js"></script>
    <script src="login.js"></script>
    <script th:inline="javascript">
        const $ = layui.$;
        const laypage=layui.laypage;

        const categoryid=/*[[${categoryid}]]*/;
        const keywords=/*[[${keywords}]]*/;
        var data={};
        if(categoryid){
            data.categoryid=categoryid;
        }
        if(keywords){
            data.name=keywords;
        }
        data.page=1;
        data.limit=9;
        var pagecount=0;
        getList();
        function getList() {
            $.ajax({
                url: 'product/list',
                data: data,
                async: false,
                success: function (result) {
                    pagecount = result.count;
                    let data = result.data;
                    $(".product").empty();
                    for (let i = 0; i < data.length; i++) {
                        let itemdata = data[i];
                        let itemtext = $("#productitem").text();
                        let $item = $(itemtext);
                        $item.find("a").attr("href", "shopping/product?id=" + itemdata.id);
                        $item.find("img").attr("src", itemdata.imgurl);
                        $item.find("[className='item-name']").text(itemdata.name);
                        $item.find("[className='item-price']").text(itemdata.price);
                        $(".product").append($item);
                    }
                }
            });
        }
        laypage.render({
            elem: 'pagebox' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: pagecount //数据总数，从服务端得到
            ,limit:data.limit
            ,limits:[9,18,30]
            ,prev:'<-'
            ,next:'->'
            ,layout:['prev', 'page', 'next','limit']
            ,jump:function(obj,first){
                data.page=obj.curr;
                data.limit=obj.limit;
                getList();
            }
        });

        $("[name='searchbtn']").click(function(){
            let searchtext=$("[name='searchtext']").val();
            location.href="shopping/list?keywords="+searchtext;
        });
    </script>
</body>

</html>